<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主轴方向 换行 主轴方向与换行的简写</title>
		<style>
			/* box1中的3个div还是和以前一样，是简单的流式布局 */
			.box1 {
				background-color: yellow;
			}
			.box1>div {
				width: 100px;
				height: 100px;
				border: 2px solid #000;
				font-size: 30px;
			}
			.box2 {
				background-color: aqua;
				/* 指定box2作为弹性布局 */
				/* 效果：子元素一横排，不用我们自己浮动 清除浮动 */
				/* 想让谁里面的元素横向排列，就给谁设置此属性，也就是给爸爸 */
				display: flex;

				/* 01 flex的行模式与列模式 */
				flex-direction: row; /*行模式 正向排序 默认值*/
				flex-direction: column;/* 列模式 正向排序*/
				flex-direction: column-reverse; /* 列模式 反向排序 */
				flex-direction: row-reverse; /*行模式 反向排序*/

				/* 02 flex的换行 */
				/* 如果把浏览器窗口缩小到不够6个div大小的宽度，6个div还是在同一行，并没有掉块：
				 原因：flex自带了很多属性，关于换行的默认值就是不换行*/
				flex-direction: row;
				flex-wrap: nowrap;/* 默认值不换行 */
				flex-wrap: wrap; /* 换行，一行显示不下到下一行显示 12345 67 */
				flex-wrap: wrap-reverse; /* 换行且行数反向排列 67 12345 */
			}
			.box2>div {
				width: 120px;
				height: 120px;
				border: 2px solid red;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div>a</div>
			<div>b</div>
			<div>c</div>
		</div>
		<div class="box2">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
			<div>7</div>
		</div>
	</body>
</html>